<template>
  <van-button v-show='nowCity' class="city" icon="location" round type="primary" color="#7232dd" to="city">{{ nowCity }}
  </van-button>
  <van-button v-if="toggle" class="toggle" round color="rgba(0,0,0,0.6)" type="danger" @click="handleToggle" text="">
    定位到您在{{ locationCiy }} /
    点击切换</van-button>
  <main id="map">
    <!-- 1、设置HTML的结构 -->
    <!-- Popup   -->
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content">
      </div>
    </div>
  </main>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useCityStore } from '/src/stores/cities.js';
import { computed, onMounted, reactive, ref } from 'vue';
import { addMap } from '/src/hooks/map.js'
import { historyCity, locationCity } from '/src/hooks/geoJson.js'
// 使用useCityStore
const cityStore = useCityStore()
// 定义定位不一致
const toggle = ref(false)
/* 1.获取存储的城市 */
/* 2.获取定位的城市 */
/* 3.判断存储的城市是否为空 */
/* 3.1
      空
        加载定位城市的json数据并飞行
*/
/* 3.2
      不为空
        3.2.1 获取存储城市的代码---加载存储城市的json并飞行
        3.2.2 判断存储城市和定位城市是否一致 
                  不一致提示
                    点击提示按钮加载定位城市并飞行
*/
/* 获取存储的城市 *//* 定义定位的城市 */
const { historyCities, locationCiy } = storeToRefs(cityStore)
/* 定义现在的城市 */
const nowCity = ref('')
/* 定义定位的城市 */
const historyCityInfo = ref(null)
const locationCityInfo = ref(null)
function handleToggle() {
  const { location, ad_info } = locationCityInfo.value
  const { lng, lat } = location
  const { adcode } = ad_info
  /* 加载地图容器 */
  // 加载geoson和飞行
  /* 加载地图容器 */
  setTimeout(
    loadGeoJsonFly(adcode, lng, lat)
  )
}
/* 加载地图容器 */
const { initMap, loadGeoJsonFly } = addMap()
onMounted(async () => {
  /* 1.获取存储的城市 */
  let city = historyCities.value[0]
  historyCityInfo.value = await historyCity(city)
  /* 2.获取定位的城市 */
  locationCityInfo.value = await locationCity()
  /* 3.判断存储的城市是否为空 */
  if (!historyCityInfo.value) {
    // 空的情况
    const { location, ad_info } = locationCityInfo.value
    const { lng, lat } = location
    const { adcode, city } = ad_info
    /* 加载地图容器 */
    initMap(adcode, lng, lat)
    nowCity.value = city
  } else {
    // 非空的情况
    const { title, ad_info, address_components, location
    } = historyCityInfo.value
    /* 存储城市的信息 */
    const { lng, lat } = location
    let { adcode } = ad_info
    console.log(historyCityInfo.value);
    if (
      city == "北京" || city == "上海" || city == "天津" || city == "重庆"
    ) {
      adcode = adcode.slice(0, 2) + "0000"
    } else {   
      adcode = adcode.slice(0, 4) + "00"
    }
    nowCity.value = address_components.city
    /* 定位城市 */
    locationCiy.value = locationCityInfo.value.ad_info.city
    initMap(adcode, lng, lat)
    /* 判断定位城市和选择城市是否一致 */
    if (nowCity.value != locationCiy.value) {
      /* 不一致提示是否切换 */
      toggle.value = true
      setTimeout(() => {
        toggle.value = false
      }, 5000)
    }
  }
})

</script>
<style  src="/src/assets/home.styl" scoped>

</style>
 <!-- 2、popup设置样式 -->
<style scoped>
.ol-popup {
  position: absolute;
  width: 100px;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 45px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

#popup-content {
  font-size: 14px;
  font-family: "微软雅黑";
}

#popup-content .markerInfo {
  font-weight: bold;
}

.markerImg {
  width: 150px;
  height: 120px;
}
</style>